<template>
  <el-container>
    <el-aside>
      <el-menu
        style="background-color: #FFE4E1; border-right: 2px solid #FF69B4;"
        text-color="#FF69B4"
        active-text-color="#FF1493"
      >
        <el-menu-item index="1" @click="MypostList()">
          <span>我的贴子</span>
        </el-menu-item>
        <el-menu-item index="2" @click="MyBackList()">
          <span>我的回复</span>
        </el-menu-item>
        <el-menu-item index="3"  @click="MySupportList()">
          <span>我的点赞</span>
        </el-menu-item>
        <el-menu-item index="4" @click="NoteMessage()">
          <span>我的私信</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main style="background-color: #FFF0F5;"> 
      <div v-if="Message">
        <el-table
          :data="Mydata"
          style="background-color: #FFFFFF; border: 2px solid #FFB6C1;">
          <el-table-column prop="content">
            <template #default="scope">
              <div v-html="scope.row.content"></div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime">
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <ChatMessage></ChatMessage>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { config } from '@/config/config';
import ChatMessage from './ChatMessage.vue';
import { useRoute, useRouter } from "vue-router";

const Mydata = ref("");
let Message = ref(true);
let route=useRoute({})

onMounted(()=>{
  MypostList()
})

const MypostList = () => {
  Message.value = true;
  axios.get("api/Message/PostList/" + localStorage.getItem("userId"), config).then(function(response) {
    Mydata.value = response.data.data;
  });
};

const MySupportList = () => {
  Message.value = true;
  axios.get("api/Message/SupportList/" + localStorage.getItem("userId"), config).then(function(response) {
    Mydata.value = response.data.data;
  });
};

const MyBackList = () => {
  Message.value = true;
  axios.get("api/Message/MyBackList/" + localStorage.getItem("userId"), config).then(function(response) {
    Mydata.value = response.data.data;
  });
};

const NoteMessage = () => {
  Message.value = false;
};
</script>

<style scoped>
.el-menu-item:hover {
  background-color: #FFB6C1 !important;
}

.el-table__header th {
  background-color: #FFE4E1;
  color: #FF69B4;
}
</style>    